/**
 * Created by Administrator on 2017/4/6.
 */
import sel from '../../../../index.js';

export default {
  init: function () {
    sel.app.controller('api2C',['$scope','$state',
    function ($scope, $state) {
      $scope.title = 'Map';
      $scope.tip = 'WorldMap';
      const population = [{name:'Australia',population:3},{name:'China',population:3},
        {name:'Brazil',population:10},
        {name:'Canada',population:10},
        {name:'England',population:3},
        {name:'France',population:3},
        {name:'Germany',population:3},
        {name:'Iceland',population:3},
        {name:'India',population:3},
        {name:'Japan',population:3},
        {name:'Netheland',population:3},
        {name:'Norway',population:3},
        {name:'Portugal',population:3},
        {name:'Russia',population:3},
        {name:'Singapore',population:3},
        {name:'South Africa',population:3},
        {name:'South Korea',population:3},
        {name:'USA',population:3}
        ];
      sel.d3.json('/api/geo',function (data) {
        $scope.geography = data.data;
        ready($scope.geography);
        var zoom = d3.zoom().on('zoom',function(){
          d3.select('.map').attr('transform',d3.event.transform);
        });
        d3.select('svg').style('background','lightblue').call(zoom);
      });


      $scope.show = function () {

      };
      function ready(geography) {
        for(var i = 0 ; i < geography.features.length; i++){
          for(var j = 0 ; j < population.length ; j ++) {
            if(geography.features[i].properties.name == population[j].name ) {
              geography.features[i].properties.population = population[j].population;
              geography.features[i].properties.color = d3.interpolateViridis(population[j].population/100);
            }
          }
        }
        const margin = {top: 0, right: 0, bottom: 0, left: 0};
        const width = 960 - margin.left - margin.right;
        const height = 500 - margin.top - margin.bottom;
        const svg = d3.select('.container')
        .append('svg')
        .attr('width', width)
        .attr('height', height)
        .append('g')
        .attr('class', 'map')
        ;
        const projection = d3.geoRobinson()
        .scale(200)
        .rotate([352, 0, 0])
        .translate( [width / 1.2, height / 2]);
        const path = d3.geoPath().projection(projection);
        svg.append('g')
        .attr('class', 'countries')
        .selectAll('path')
        .data(geography.features)
        .enter().append('path')
        .attr('d', path)
        .style('fill',function (d) {
          return d.properties.color || 'white'
        })
        .style('fill-opacity',0.8)
        .style('stroke','lightgray')
        .style('stroke-width', 1)
        .style('stroke-opacity', 0.5)
        .on("click",function (d) {
          d3.select('.tips').remove();
          $state.go('api.api3',{country: d.properties.name});
        })
        .on('mouseover',function (d) {
          d3.select(this)
          .style('fill-opacity', 1)
          .style('stroke-opacity', 1)
          .style('stroke-width', 2)
          ;
          tip(d);
        })
        .on("mouseout",function () {
          d3.select('.tips').remove();
          d3.select(this)
          .style('fill-opacity', 0.8)
          .style('stroke-opacity', 0.5)
          .style('stroke-width', 1)
        })
        ;
      };

      function tip(data) {
        var x = d3.event.pageX + 10;
        var y = d3.event.pageY - 10;
        d3.select('body').append('div').attr('class','tips');
        d3.select('.tips')
        .style('top',y+'px').style('left', x+'px')
        .text(data.properties.name)
        .append('div')
        .text(data.properties.population ||'暂无统计');
      }






























    }])
  }
}